<template>
  <div class="admin-container">
    <h2>后台管理 - 用户订阅与白名单</h2>

    <h3>私聊消息记录</h3>
    <table class="user-table">
      <thead>
        <tr>
          <th>用户名</th>
          <th>微信 ID</th>
          <th>会员等级</th>
          <th>有效期至</th>
          <th>白名单状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.username }}</td>
          <td>{{ user.wechatId }}</td>
          <td>{{ user.subscription?.plan?.name || '无' }}</td>
          <td>{{ formatDate(user.subscription?.expiresAt) }}</td>
          <td>
            <input type="checkbox" v-model="user.isWhitelisted" @change="toggleWhitelist(user)" />
          </td>
          <td>
            <button @click="viewDetails(user)">查看详情</button>
          </td>
        </tr>
      </tbody>
    </table>

    <h3 style="margin-top: 40px">群聊消息记录</h3>
    <table class="user-table">
      <thead>
        <tr>
          <th>时间</th>
          <th>群组名称</th>
          <th>发送者</th>
          <th>内容</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="msg in groupMessages" :key="msg.timestamp">
          <td>{{ msg.timestamp }}</td>
          <td>{{ msg.groupName }}</td>
          <td>{{ msg.sender }}</td>
          <td>{{ msg.content }}</td>
        </tr>
      </tbody>
    </table>

    <h3 style="margin-top: 40px">文件消息记录</h3>
    <table class="user-table">
      <thead>
        <tr>
          <th>时间</th>
          <th>用户名</th>
          <th>文件名</th>
          <th>大小</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="msg in fileMessages" :key="msg.timestamp">
          <td>{{ msg.timestamp }}</td>
          <td>{{ msg.username }}</td>
          <td>{{ msg.fileName }}</td>
          <td>{{ msg.fileSize }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const users = ref([]);
const groupMessages = ref([]);
const fileMessages = ref([]);

onMounted(async () => {
  try {
    const res = await axios.get('/api/users');
    const userList = res.data;

    // 获取订阅信息
    const subscriptionsRes = await axios.get('/api/subscriptions');
    const subscriptions = subscriptionsRes.data.reduce((map, sub) => {
      map[sub.user.username] = sub;
      return map;
    }, {});

    // 合并数据
    users.value = userList.map(user => ({
      ...user,
      subscription: subscriptions[user.username] || null
    }));

    // 获取群聊消息
    const groupMsgRes = await axios.get('/api/messages/group');
    groupMessages.value = groupMsgRes.data;

    // 获取文件消息
    const fileMsgRes = await axios.get('/api/messages/file');
    fileMessages.value = fileMsgRes.data;
  } catch (err) {
    console.error('获取用户列表失败:', err);
  }
});

const toggleWhitelist = async (user) => {
  try {
    await axios.put(`/api/users/${user.id}`, {
      isWhitelisted: user.isWhitelisted
    });
    alert(`白名单状态已更新`);
  } catch (err) {
    alert('更新白名单失败');
    user.isWhitelisted = !user.isWhitelisted; // 回滚 UI
  }
};

const viewDetails = (user) => {
  alert(`功能待实现：查看 ${user.username} 的详细信息`);
};

const formatDate = (date) => {
  return date ? new Date(date).toLocaleDateString() : '-';
};
</script>

<style scoped>
.admin-container {
  padding: 20px;
}
.user-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.user-table th, .user-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
.user-table tr:nth-child(even) {
  background-color: #f9f9f9;
}
.user-table tr:hover {
  background-color: #f1f1f1;
}
button {
  padding: 5px 10px;
  background-color: #409EFF;
  color: white;
  border: none;
  cursor: pointer;
}
button:hover {
  background-color: #337ecc;
}
</style>